import ArticleItem from '@/components/ArticleItem'
import { useAppSelector } from '@/store'
import { getArticles } from '@/store/action/article'
import { InfiniteScroll, PullToRefresh } from 'antd-mobile'
import { useEffect, useRef, useState } from 'react'
import { useDispatch } from 'react-redux'

type Props = {
  channel_id: number
}

export default function ArticleList({ channel_id }: Props) {
  const { activeId } = useAppSelector((state) => state.channel)
  const dispatch = useDispatch()
  const { articles } = useAppSelector((state) => state.article)
  // console.log(articles)
  // 💥 articles 一开始是空对象，使用 ?. 访问更安全
  const list = articles[channel_id]?.list

  useEffect(() => {
    // 🔔 如果 list 有数据，就不需要发送首次打开频道时请求了
    if (list) return
    // console.log({ channel_id, activeId })
    if (channel_id === activeId) {
      // console.log('发送请求获取频道数据', channel_id)
      dispatch(getArticles({ channel_id }))
    }
  }, [channel_id, activeId, dispatch, list])

  // 触发刷新时的处理函数
  const handleRefresh = async () => {
    // console.log('下拉刷新，需要重新获取频道数据')
    dispatch(getArticles({ channel_id, isRefresh: true }))
  }

  // 无限滚动组件 - 滚动触底加载更多数据
  const [hasMore, setHasMore] = useState(true)
  //  🕐 需要准备一个记录加载状态的变量，防止触底后发送多次无效请求
  const loading = useRef(false)
  const handleLoadMore = async () => {
    // 🕐 如果数据正在加载中，就先退出
    if (loading.current) return
    // console.log('需要加载更多数据')
    // 🕐 更新标记，表示数据加载中
    loading.current = true
    try {
      // 发送请求获取更多数据，需要使用到上一次推荐的时间戳，防止获取到重复的新闻。
      await dispatch(getArticles({ channel_id, timestamp: articles[channel_id].timestamp }))
    } catch {
      setHasMore(false)
    }
    // 🕐 请求完成后，更新标记表示加载完毕
    loading.current = false
  }

  // 💥 没有列表，先不渲染
  if (!list) return null

  // 🔔 请求结束后，有列表数据了，再渲染列表
  return (
    <div>
      {/* 下拉刷新组件 */}
      <PullToRefresh onRefresh={handleRefresh}>
        {list.map((item) => (
          <ArticleItem style={{ padding: 10 }} key={item.art_id} article={item} />
        ))}
        {/* 无限滚动组件 */}
        <InfiniteScroll loadMore={handleLoadMore} hasMore={hasMore} />
      </PullToRefresh>
    </div>
  )
}
